<template>
	<view class="mine" v-if="user">
		<view class="user-header">
			<image src="/static/images/mine-background.png" mode="" class="background-img"></image>
			<view class="section">
				<view class="section-top">
					<view class="section-one">
						
						<view class="user-img-box" @click="goToMyProfile()">
							<image :src="user.avatar_url" mode="" class="user-img"></image>
						</view>
					</view>
					<view class="section-two">
						<view class="user-name">{{ user.name }}</view>
						<view class="vip-icon">
							<image src="/static/images/user-grade-vip.png" v-if="user.grade=='vip'" class="user-grade-icon" mode=""></image>
							<image src="/static/images/golder-grade-normal.png" v-if="user.grade=='vip'&&(user.is_gold_intern==1 || user.is_gold_intern==true)&&(user.is_gold_master!=1 || user.is_gold_master==false || user.is_gold_master=='')" class="golder-grade-vip" mode=""></image>
							<image src="/static/images/golder-grade-icon-vip3.png"  class="golder-grade-vip-icon" mode="heightFix" v-if="user.grade=='vip'&&(user.is_gold_master==1 || user.is_gold_master==true)"></image>
							
						</view>
						
					</view>
				</view>
				<view class="section-three">
					<view class="user-produce">你不喝我不喝，世界好酒往哪搁</view>
				</view>
				
			</view>
			
		</view>
		<view class="user-card-balance">
			<view class="user-balance"  @click="goMyBalance()">
				<image src="/static/images/jz.png" mode="" class="user-card-balance-img"></image>
				<view class ="user-card-balance-text">
					<view>酒资</view>
					<view>{{ user.balance }}</view>
				</view>
			</view>
			<view class="user-card"  @click="goMyCoupon()">
				<image src="/static/images/kj.png" mode="" class="user-card-balance-img"></image>
				<view class ="user-card-balance-text">
					<view>卡卷</view>
					<view>{{user.coupon_counts}}</view>
				</view>
			</view>
			
		</view>
		<view class="ordder" v-if="counts">
			<view class="order-title" @click="goMyOrder()">
				<view>我的订单</view>
				<view >
					<text>查看全部订单</text>
					<image src="/static/images/rightmore.png" class="right-more" mode=""></image>
				</view>
			</view>
			<view class="order-state">
				<view class="order-state-item"  @click="checkMyOrders(1,'unpaid')">
					<image src="/static/images/dfk.png" mode=""></image>
					<view>待支付</view>
					<view class="order-state-count" v-if="counts.unpaid!=0">
						<view v-if="counts.unpaid>99">···</view>
						<view v-else>{{ counts.unpaid }}</view>
					</view>
				</view>
				<view class="order-state-item"  @click="checkMyOrders(2,'undelivered')">
					<image src="/static/images/dfh.png" mode=""></image>
					<view>待发货</view>
					<view class="order-state-count" v-if="counts.undelivered!=0">
						<view v-if="counts.undelivered>99">···</view>
						<view v-else>{{ counts.undelivered }}</view>
					</view>
				</view>
				<view class="order-state-item" @click="checkMyOrders(3,'delivered')">
					<image src="/static/images/dsh.png" mode=""></image>
					<view>已发货</view>
					<view class="order-state-count" v-if="counts.delivered!=0">
						<view v-if="counts.delivered>99">···</view>
						<view v-else>{{ counts.delivered }}</view>
					</view>
				</view>
				<view class="order-state-item" @click="checkMyOrders(4,'uncommented')">
					<image src="/static/images/dpj.png" mode=""></image>
					<view>待评价</view>
					<view class="order-state-count" v-if="counts.uncommented!=0">
						<view v-if="counts.uncommented>99">···</view>
						<view v-else>{{ counts.uncommented }}</view>
					</view>
				</view>
				<view class="order-state-item" @click="checkMyOrders(5,'aftersales')">
					<image src="/static/images/dtuihuanhuo.png" mode=""></image>
					<view>退换货</view>
				</view>
			</view>
		</view>
		
		
		<view class="user-friend">
			<view class="user-friend-invite">
				<view>
					<image src="/static/images/invite.png" mode="" class="user-friend-img"></image>
					<view class ="user-friend-text">
						<view>邀请好友，免费喝酒</view>
					</view>
				</view>
			</view>
			<view class="product-bz">
				<view>
					<image src="/static/images/bz.png" mode="" class="user-bz-img"></image>
					<view class ="user-friend-text">
						<view>资质齐全，品质保障</view>
					</view>
				</view>
				
			</view>
			
		</view>
		
		<view class="user-set">
			<view class="user-set-item" @click="toAddress()">
				<image src="/static/images/mine-dz.png" mode="" class="user-set-img"></image>
				<view class ="user-set-text">地址管理</view>
			</view>
			<view class="user-set-item">
				<image src="/static/images/mine-lxkf.png" mode="" class="user-set-img"></image>
				<view class ="user-set-text">联系客户</view>
			</view>
			<view class="user-set-item">
				<image src="/static/images/mine-tsjy.png" mode="" class="user-set-img"></image>
				<view class ="user-set-text">投诉建议</view>
			</view>
			<view class="user-set-item" @click="setting()">
				<image src="/static/images/mine-sz.png" mode="" class="user-set-img"></image>
				<view class ="user-set-text">设置</view>
			</view>
		</view>
		<!-- <view class="balance">
			<view class="balance-item" @click="getbalance()">
				<view>
					<image src="/static/images/balance.png" mode=""></image>
					<view>余额</view>
				</view>
				<view>
					<view>{{ user.gold_coins }}</view>
					<image src="/static/images/rightmore.png" mode=""></image>
				</view>
			</view>
			<view class="balance-item" @click="goBankCard()">
				<view>
					<image src="/static/images/bank-card-icon.png" mode=""></image>
					<view>银行卡</view>
				</view>
				<view>
					<image src="/static/images/rightmore.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="setting" >
			<view class="balance-item" @click="goMyFriend()">
				<view>
					<image src="/static/images/tabbar-icons/collage.png" mode=""></image>
					<view>我的伙伴</view>
				</view>
				<view>
					<view>{{ user.team_count }}</view>
					<image src="/static/images/rightmore.png" mode=""></image>
				</view>
			</view>
			<view class="balance-item" @click="toAddress()">
				<view>
					<image src="/static/images/address-icon.png" mode=""></image>
					<view>地址管理</view>
				</view>
				<view>
					<image src="/static/images/rightmore.png" mode=""></image>
				</view>
			</view>
			<view class="setting-item" @click="setting()">
				<view>
					<image src="/static/images/setting.png" mode=""></image>
					<view>设置</view>
				</view>
				<view>
					<image src="/static/images/rightmore.png" mode=""></image>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 100rpx;"></view>
		<view class="bind-recommender-pop" v-if="downPopShow">
			<view class="bind-recommender-pop-content">
				<view class="bind-recommender-pop-title">提示</view>
				<view class="pop-tips">余额可随时在平台购买商品使用，也可在App中进行提现。</view>
				<view class="bind-recommender-pop-bar">
					<view @click="downCancle()">取消</view>
					<view @click="goDownLoad()">下载APP</view>
				</view>
			</view>
		</view>
		<view class="bind-recommender-pop" v-if="shopingMoneyShow">
			<view class="bind-recommender-pop-content bind-recommender-pop-content1">
				<view class="bind-recommender-pop-title">提示</view>
				<view class="pop-tips">购物金可随时在平台购买商品使用。</view>
				<view class="bind-recommender-pop-bar">
					<view class="i-know" @click="shopingMoneyKnow">知道了</view>
				</view>
			</view>
		</view> -->
		<!-- <down-load-app-com :top="105"></down-load-app-com> -->
	</view>
</template>

<script>
	import store from "store"
	import { mapMutations,mapGetters } from 'vuex'
	import Skeleton from "mixins/Skeleton"
	import AuthChecking from "mixins/AuthChecking"
	import SkeletonMineCom from "skeletons/SkeletonMineCom"
	import { getBrokeragesCount } from "api/userBrokeragesCountApi"
	import { getOrdersCounts } from "api/orderApi"
	import { getUser } from "api/userApi"
	export default {
		store,
		mixins: [
			Skeleton,
			AuthChecking
		],
		computed:{
			...mapGetters([
				'user',
				'isLogin'
			])
		},
		components: {
			SkeletonMineCom
		},
		data() {
			return {
				estimateData:null,
				counts:null,
				downPopShow:false,
				shopingMoneyShow:false
			}
		},
		methods: {
			...mapMutations(['setUser']),
			goDownLoad(){
				uni.navigateTo({url: `/packs/pages/download/download?from=1`})
			},
			async getUser(){
				let response =  await getUser()
				this.setUser(response)
			},
			async loadOrdersCounts() {
				const response = await getOrdersCounts()
				if(response!=undefined){
					this.counts = response.counts
				}
			},
			goToMyProfile() {
			  uni.navigateTo({url: `/packs/pages/user/profile`})
			},
			goMyBalance() {
			  uni.navigateTo({url: `/packs/pages/user/wine`})
			},
			goMyCoupon() {
			  uni.navigateTo({url: `/packs/pages/user/coupon`})
			},
			goRedPckage(){
				uni.navigateTo({
					url:'/packs/pages/goodredpacket/goodredpacket'
				})
			},
			goMyOrder(){
				uni.navigateTo({
					url:'/packs/pages/order/index?index=0&status=all'
				})
			},
			checkMyOrders(index = 0, status = null) {
			  uni.navigateTo({url: `/packs/pages/order/index?index=${index}&status=${status}`})
			},
			goMember(index){
				uni.navigateTo({
					url:"/packs/pages/user/member?index=" + index
				})
			},
			toAddress() {
				if(this.user){
					uni.navigateTo({
						url: `/packs/pages/address/index`
					})
				}else{
					uni.redirectTo({url: '/packs/pages/auth/auth'})
				}
			},
			toAccountDetail() {
				uni.navigateTo({
					url: `/packs/pages/accountDetail/accountDetail`
				})
			},
			goMyFriend(type){
				uni.navigateTo({
					url: `/packs/pages/myFriend/myFriend?type=${type}`
				})
			},
			copy(data){
				uni.setClipboardData({
				    data: data,
				    success: function () {
							uni.showToast({
								icon:'none',
								title:'复制成功'
							}) 
				    }
				})
			},
			setting(){
				uni.navigateTo({
					url: `/packs/pages/userset/userset`
				})
			},
			toMessage(){
				uni.navigateTo({
					url: `/pages/message/message`
				})
			},
			getbalance(){
				uni.navigateTo({
					url: `/packs/pages/activity/activityAccount`
				})
			},
			goWithdrawal(){
				uni.navigateTo({
					url: `/packs/pages/withdrawal/withdrawal`
				})
			},
			goBankCard(){
				uni.navigateTo({
					url: `/packs/pages/withdrawal/bankCard`
				})
			},
			downCancle(){
				this.downPopShow = false
			},
			getshopingMoney(){
				uni.navigateTo({url: `/packs/pages/product/spendArea`})
			},
			shopingMoneyKnow(){
				this.shopingMoneyShow = false
			},
			opennewwap(){
				uni.request({
				    url: 'https://shopwapdev.littleshop.shop', //仅为示例，并非真实接口地址。
				    data: {
				        text: 'uni.request'
				    },
				    header: {
				        'custom-header': 'hello' //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res.data);
				    }
				});
			}
		},
		async onShow() {
			if(await this.isLogin){
				await this.getUser()
				await this.loadOrdersCounts()
			}
			uni.setStorage({
				 key:"newsTop",
				 data:0
			})
		},
		onLoad() {
			/* if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL);
			} */
		}
	}
</script>

<style lang="scss" scoped >
	page{
		background: #F6F6F6;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		position: fixed;
		left:0;
		top:0;
	}
	.user-header{
		width: 750rpx;
		height: 486rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin:0 auto ;
		postion:relative;
		.background-img{
			width:100%;
			height:486rpx;
			
		}
	}
	.section{
		position:absolute;
		top:200rpx;
	}
	.section-one{
		align-items: center;
		justify-content: space-between;
		float:left;
		
	}
	.user-img-box{
		width: 136rpx;
		height: 136rpx;
		position: relative;
		margin-left: 66rpx;
		margin-top:22rpx;
	}
	.user-img{
		display: block;
		width: 136rpx;
		height: 136rpx;
		border-radius: 50%;
	} 
	.partner-tab-item{
		display: flex;
		align-items: center;
		>view:nth-child(1){
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
		>view:nth-child(2){
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			margin-left: 16rpx;
		}
	}
	.partner-tab-item1{
		margin:0 88rpx 0 48rpx;
		margin:0 48rpx 0 48rpx;
	}
	.section-top{
		overflow:hidden;
		color:#fff;
	}
	.section-two{
		float:left;
		align-items: center;
		margin-top: 34rpx;
		margin-left: 26rpx;
		.user-name{
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #fff;
			
		}
		.vip-icon{
			margin-top:18rpx;
			
			.user-grade-icon{
				display: block;
				width: 50rpx;
				height: 40rpx;
			}
			.golder-grade-vip{
				display: block;
				width: 80rpx;
				height: 40rpx;
				margin-left: 18rpx;
			}
			.golder-grade-vip-icon{
				height: 39rpx;
				margin-left: 10rpx;
			}
			
		}
		
	
	}
	.section-three{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		line-height: 32rpx;
		margin:18rpx 0rpx 0rpx  66rpx;
		.invite_code{
			margin: 0 0 0 8rpx;
		}
		.line{
			width: 2rpx;
			height: 24rpx;
			background: #333333;
			margin:0 8rpx;
		}
	}
	.down-app{
		width:100%;
		height: 90rpx;
		padding-top:15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FED161;
		background: rgba(254, 212, 25, .3);
		>image{
			display: block;
			height: 70rpx;
			margin-left: 30rpx;
		}
		.button{
			font-size: 24rpx;
			font-weight: 600;
			color:#FFFFFF;
			width: 150rpx;
			height: 60rpx;
			border-radius: 15rpx;
			background:#000000;
			background: linear-gradient(90deg, #FF6900 0%, #FF2E00 100%);
			// background: linear-gradient(90deg, #FE404F 0%, #FA2C1A 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 30rpx;
		}
	}
	.user{
		display: flex;
		padding-top: 40rpx;
	}
	.userImg{
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		margin:0 22rpx 0 20rpx;
		image{
			display: block;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	.user-name{
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}
	.name-level{
		display: flex;
		margin-bottom: 10rpx;
	}
	.badge-level{
		display: flex;
		font-size:20rpx;
		color:#8461F8;
		margin-left: 20rpx;
		font-weight: 600;
	}
	.active-level{
		line-height: 20rpx;
		margin-top:16rpx;
	}
	.reserve-plan{
		line-height: 20rpx;
		margin-top:16rpx;
	}
	.badge-lable{
		display: flex;
		min-width: 84rpx;
		height: 40rpx;
		background-size: 100% 40rpx;
		position: relative;
	}
	.star{
		width: 100%;
		padding-left: 42rpx;
		display: flex;
		font-size:16rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: flex-end;
		margin:12rpx 16rpx 0 0;
	}
	.vipbadge{
		display: block;
		// width: 84rpx;
		height: 44rpx;
		margin-right: 20rpx;
	}

	.vip-expired{
		position: relative;
		min-width: 84rpx;
		height:24rpx;
		display: flex;
		align-items: center;
		justify-content:center;
		margin-top:14rpx;
		.vip-expired-text{
			font-size:20rpx;
			line-height: 20rpx;
			color:#8461F8;
			margin-left: 20rpx;
			font-weight: 600;
		}
	}
	.invite{
		display: flex;
		align-items: center;
	}
	.invite-code{
		border: 2rpx solid #555555;
		border-radius:20rpx;
		font-size: 22rpx;
		padding:2rpx 15rpx;
		color: #555555;
		margin-top:6rpx;
	}
	.copycode{
		display: block;
		width: 34rpx;
		height: 34rpx;
		margin-left: 20rpx;
	}
	.partner{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 32rpx;
	}
	.partner-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		>view:nth-child(1){
			font-size: 36rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 50rpx;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
		}
	}
	.vip-card{
		margin-top:16rpx;
	}
	.vip-card-item{
		width: 710rpx;
		height: 120rpx;
		margin: 0 auto;
		background:url(../../static/images/vip-card-bg-yellow.png);
		background-size:cover;
		position: relative;
	}
	.vip-card-item1{
		width: 710rpx;
		height: 120rpx;
		margin: 0 auto;
		background:url(../../static/images/svip-bg.png);
		background-size:cover;
		position: relative;
	}
	.vip-card-item2{
		width: 710rpx;
		height: 120rpx;
		margin: 0 auto;
		background:url(../../static/images/gold-svip-bg.png);
		background-size:cover;
		position: relative;
	}
	.vipOperationBtn{
		display: block;
		width: 188rpx;
		height: 62rpx;
		position: absolute;
		right:100rpx;
		top:30rpx;
	}
	.desc{
		margin:0rpx 0 0 32rpx;
		padding-top: 20rpx;
	}
	.desc2{
		.subtitle{
			margin-top: 55rpx;
			font-size:22rpx;
			color:#A5916A;
		}
	}

	.title{
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 44rpx;
	}
	.subtitle{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.ordder{
		width: 718rpx;
		height: 274rpx;
		background: #FFFFFF;
		margin: 16rpx auto 0;
		box-shadow: 0 0 8px #ccc;
	}
	.order-title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;
		border-bottom: 1rpx solid #F0F0F0;
		>view:nth-child(1){
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			margin-left: 26rpx;
		}
		>view:nth-child(2){
			display: flex;
			align-items: center;
			font-size: 26rpx;
			font-weight: 400;
			color: #999999;
		}
	}
	.right-more{
		display: block;
		width: 32rpx;
		height: 32rpx;
		margin: 0 16rpx 0 5rpx;
	}
	.order-state{
		display: flex;
		justify-content: space-around;
		margin-top: 42rpx;
	}
	.order-state-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		image{
			display: block;
			width: 60rpx;
			height: 50rpx;
			margin-bottom: 20rpx;
		}
		>view{
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}
	}
	
	.order-state-count{
		width: 32rpx;
		height: 32rpx;
		padding:3rpx;
		background: #F24D4D;
		display: flex;
		justify-content: center;
		text-align: center;
		border-radius: 50%;
		position: absolute;
		right: 0;
		top:-18rpx;
		>view{
			padding-top:7rpx;
			font-size: 20rpx;
			color: #FFFFFF;
			line-height: 22rpx;
		}
	}
	
	.forecast-red-package{
		width: 710rpx;
		padding-bottom: 32rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 18rpx auto 18rpx;
	}
	
	.card-title{
		height: 94rpx;
		padding: 0 32rpx;
		border-bottom: 1rpx solid #F0F0F0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
		image{
			display: block;
			width: 32rpx;
			height: 32rpx;
		}
	}
	.moneth-red-package{
		height: 120rpx;
		border-bottom: 1rpx solid #F0F0F0;
		padding: 0 32rpx;
		>view:nth-child(1){
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
			line-height: 34rpx;
			margin-top: 22rpx;
		}
		>view:nth-child(2){
			font-size: 64rpx;
			font-weight: bold;
			color: #FF4924;
			line-height: 74rpx;
		}
	}
	.today-red-package{
		display: flex;
		justify-content: space-between;
		margin-top: 22rpx;
		>view{
			>view:nth-child(1){
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				// color: #FF4924;
				line-height: 34rpx;
			}
			>view:nth-child(2){
				font-size: 48rpx;
				font-weight: bold;
				color: #FF4924;
				// color: #333333;
				line-height: 56rpx;
				margin-right: 64rpx;
			}
		}
		>view:nth-child(1){
			margin:0rpx 0rpx 0 32rpx;
		}
		>view:nth-child(2){
			margin-right:64rpx;
		}
	}
	.balance{
		width: 710rpx;
		// height: 208rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 16rpx auto 0;
	}
	.balance-item,.setting-item{
		height: 104rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 32rpx;
		>view:nth-child(1){
			display: flex;
			align-items: center;
			>view{
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}
			>image{
				display: block;
				width: 48rpx;
				height:48rpx;
				margin-right: 20rpx;
			}
		}
		>view:nth-child(2){
			display: flex;
			align-items: center;
			>view{
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
			}
			>image{
				display: block;
				width: 32rpx;
				height:32rpx;
			}
		}
	}
	.balance .balance-item:not(:last-child){
		border-bottom:1rpx solid #F0F0F0 ;
	}
	.setting{
		width: 710rpx;
		// height: 208rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 16rpx auto 100rpx;
	}
	.bind-recommender-pop{
		width: 100%;
		height: 100%;
		position: fixed;
		top:0;
		left:0;
		background: rgba(0,0,0,.5);
		z-index: 999;
	}
	.bind-recommender-pop-content{
		width:550rpx;
		height:350rpx;
		position: absolute;
		left:0;
		top:0;
		right: 0;
		bottom: 0;
		margin:auto;
		background: #FFFFFF;
		border-radius: 20rpx;	
	}
	.bind-recommender-pop-content1{
		height:280rpx;
	}
	.bind-recommender-pop-title{
		font-size: 30rpx;
		font-weight: 500;
		text-align: center;
		line-height: 90rpx;
	}
	.bind-recommender-pop-bar{
		width: 100%;
		display: flex;
		height: 80rpx;
		position: absolute;
		background: #F6F6F6;
		border-radius: 0 0 20rpx 20rpx;
		left:0;
		bottom: 0;
		>view{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50%;
			font-size: 28rpx;
		}
		>view:nth-child(1){
			color: #999999;
		}
		>view:nth-child(2){
			background: #FED161;
			color: #666666;
			border-radius: 0 0 20rpx 0rpx;
		}
		.i-know{
			width: 100%;
			background: #FED161;
			color: #333333!important;
			border-radius: 0 0 20rpx 20rpx;
		}
	}
	.pop-tips{
		width: 500rpx;
		margin: 0 auto;
		font-size: 30rpx;
		color: #666666;
	}
	.user-card-balance{
		width:718rpx;
		height:208rpx;
		margin:28rpx auto 0rpx;
		box-shadow: 0 0 8px #ccc;
		display:flex;
		
	}
	.user-balance{
		width:50%;
		height:128rpx;
		margin-top:40rpx;
		margin-left:78rpx;
		overflow:hidden;
		border-right:2rpx solid #f3f3f3;
	}
	.user-card{
		width:50%;
		height:128rpx;
		margin-top:40rpx; 
		margin-left:84rpx;
		
	}
	.user-card-balance-img{
		width:98rpx;
		height:98rpx;
		float:left;
		margin-top:12rpx;
	}
	.user-card-balance-text{
		margin-left:22rpx;
		margin-top:24rpx;
		float:left;
		font-size:28rpx;
		>view:nth-child(2){
			margin-top:2rpx;
		}
		
	}
	.user-friend{
		width:718rpx;
		height:156rpx;
		margin:22rpx auto 0rpx;
		
		/* box-shadow: 0 0 8px #ccc; */
		display:flex;
		.user-friend-invite{
			width:350rpx;
			height:148rpx;
			box-shadow: 0 0 8px #ccc;
			>view:nth-child(1){
				margin-top:54rpx;
			}
		}
		.product-bz{
			
			width:350rpx;
			height:148rpx;
			box-shadow: 0 0 8px #ccc;
			margin-left:18rpx; 
			>view:nth-child(1){
				margin-top:54rpx;
			}
			
		}
	}
	.user-friend-img{
		width:66rpx;
		height:50rpx;
		float:left;
		margin-left:26rpx;
	}
	.user-bz-img{
		width:62rpx;
		height:62rpx;
		float:left;
		margin-left:26rpx;
	}
	.user-friend-text{
		float:left;
		font-size:24rpx;
		margin-left:14rpx;
		>view{
			margin-top:12rpx;
			
		}
	}
	.user-set{
		
		width:718rpx;
		height:192rpx;
		margin:22rpx auto 0rpx;
		box-shadow: 0 0 8px #ccc; 
		display:flex;
	}
	.user-set-item{
		width:25%;
		text-align: center;
		margin-top:40rpx;
		
	}
	.user-set-img{
		width:56rpx;
		height:56rpx;
	}
	.user-set-text{
		font-size:24rpx;
		color:#000;
		margin-top:20rpx;
	}
</style>
